<template>
  <view class="user_shiqin allColumnCenter">
    <!--  头部  -->
    <header-title ref="headerTitle" title="我的" is-fixed @getPageHeight="getPageHeight"
                  z-index="10">
    </header-title>
    <view :style="{height:`${headerHeight}px`}"></view>
    <!--  背景  -->
    <view class="bag"></view>
    <scroll-view :scroll-y="true" class="family_scrollView" :style="{
      height: `calc(100vh - ${headerHeight}px)`
    }">
      <view style="width: 750rpx;" class="allColumnCenter">
        <view class="user_shiqin_headerAvater mt-18 row items-center justify-between z-1">
          <view class="user_shiqin_headerAvater_left row items-center">
            <image-avater :width="119" :height="119" src="/static/shiqin-images/man.png"></image-avater>
            <view class="user_shiqin_headerAvater_left_info ml-20">
              <view class="user_shiqin_headerAvater_left_info_top row items-center">
                <view class="user_shiqin_headerAvater_left_info_top_name">
                  <text class="user_shiqin_headerAvater_left_info_top_name_text">{{userInfo.username || '暂无昵称'}}</text>
                </view>
                <image src="https://sq-crms.oss-cn-beijing.aliyuncs.com/UNI_APP/shiqin_icon/vip.png"
                       class="user_shiqin_headerAvater_left_info_top_image ml-18"
                       @click="intoPage('/pages/annex/vip_paid/index')"></image>
              </view>
              <text class="user_shiqin_headerAvater_left_info_bottom mt-4">拾亲号：123312321313</text>
              <u-line-progress :percent="70" active-color="#FF4206" inactive-color="#E5E5E5" height="9"
                               :showPercent="false" class="flex mt-4"></u-line-progress>
              <view class="user_shiqin_headerAvater_left_info_describe row alignItemsCenter mt-4"
                    @click="intoPage(userInfo.level_status == 1 ? '/pages/users/user_vip/index' : '/pages/annex/vip_grade_active/index')">
                <view class="user_shiqin_headerAvater_left_info_describe_level allRowCenter">
                  <text class="user_shiqin_headerAvater_left_info_describe_level_text">{{userInfo.vip_name}}</text>
                </view>
                <text class="user_shiqin_headerAvater_left_info_describe_number ml-15">0/15 幸福值</text>
                <u-icon name="arrow-right" size="13" color="#000000" class="ml-8"></u-icon>
              </view>
            </view>
          </view>
          <view class="user_shiqin_headerAvater_right allRowCenter" @click="goToUserPath">
            <text class="user_shiqin_headerAvater_right_text">完善资料</text>
            <u-icon name="arrow-right" size="13" color="#000000" class="ml-8"></u-icon>
          </view>
        </view>
        <view class="svip_card z-1 mt-25"
              @click="intoPage(userInfo.level_status == 1 ? '/pages/users/user_vip/index' : '/pages/annex/vip_grade_active/index')">
          <view class="h-full flex-between-center pl-32 pr-28 text--w111-FFD89C fs-24">
            <view class="flex-y-center">
              <text class="iconfont icon-ic_crown fs-32"></text>
              <text class="pl-12">尊敬的{{ userInfo.vip_name }}{{userInfo.username}}{{ getTimePeriod() }}</text>
            </view>
            <view class="flex-y-center">
              <text>查看权益</text>
              <text class="iconfont icon-ic_rightarrow fs-24"></text>
            </view>
          </view>
        </view>
        <view class="user-page z-1" :style="colorStyle" style="width: 750rpx;padding-bottom: 50rpx">
          <template v-if="userInfo && isObjectData(diyData)">
            <user-order-static
                v-if="isObjectData(orderAdminData) && orderAdminData.order.user_order"
                :orderAdminData="orderAdminData.order"
                :orderStaticData="diyData.orderStatic"
            ></user-order-static>
            <user-poster :posterData="diyData.poster"></user-poster>
            <user-menu :menuData="diyData.menu"></user-menu>
            <user-mer-menu v-if="storeMenuShow" :merMenuData="diyData.merMenu"></user-mer-menu>
<!--            <view class="copy_right pb-20">-->
<!--              <template v-if="copyRightText">-->
<!--                <image :src="copyRightImg" mode="aspectFill" class="copyRightImg"></image>-->
<!--                <view class="copyRightText">-->
<!--                  {{ copyRightText }}-->
<!--                </view>-->
<!--              </template>-->
<!--              <image v-else :src="copyRightImg" mode="aspectFill" class="support"></image>-->
<!--            </view>-->
          </template>
          <view class="mark" v-show="isextension"></view>
          <pageFooter :style="colorStyle"></pageFooter>
          <ewcomerPop v-if="isComerGift" :comerGift="comerGift" @comerPop="comerPop"></ewcomerPop>
          <!-- #ifdef MP -->
          <editUserModal :isShow="editModal" @closeEdit="closeEdit" @editSuccess="editSuccess"></editUserModal>
          <!-- #endif -->
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import HeaderTitle from "../../components/shiqinComponents/pageComponents/headerTitle.vue";
import ImageAvater from "../../components/shiqinComponents/pageComponents/imageAvater.vue";

import {storeCardApi} from '@/api/store.js';
import {newcomerGift} from '@/api/activity.js';
import {copyRight} from '@/api/api.js';
import {
  getMenuList,
  getUserInfo,
  setVisit,
  updateUserInfo,
  getRandCode,
  updateWechatInfo,
  getMenuData
} from '@/api/user.js';
import {wechatAuthV2, silenceAuth} from '@/api/public.js';
import {toLogin} from '@/libs/login.js';
import {mapState, mapGetters} from 'vuex';
// #ifdef H5
import Auth from '@/libs/wechat';
// #endif
import {HTTP_REQUEST_URL} from '@/config/app';

const app = getApp();
import ewcomerPop from '@/components/ewcomerPop/index.vue';
import pageFooter from '@/components/pageFooter/index.vue';
import dayjs from '@/plugin/dayjs/dayjs.min.js';
import Routine from '@/libs/routine';
import colors from '@/mixins/color';
// #ifdef MP
import editUserModal from '@/components/eidtUserModal/index.vue';
// #endif
import userOrderStatic from './components/order_static/index.vue';
import userMenu from './components/menus/index.vue';
import userMerMenu from './components/merMenus/index.vue';
import userPoster from './components/poster/index.vue';


export default {
  components: {
    ImageAvater,
    HeaderTitle,
    userOrderStatic,
    userMenu,
    userMerMenu,
    userPoster,
    pageFooter,
    ewcomerPop,
    // #ifdef MP
    editUserModal
    // #endif
  },
  computed: {
    ...mapGetters({
      cartNum: 'cartNum',
      isLogin: 'isLogin'
    }),
    headerBg() {
      return `url(${HTTP_REQUEST_URL}/statics/images/users/user_header_bg.png)`;
    }
  },
  filters: {},
  mixins: [colors],
  provide() {
    return {
      tapQrCode: this.tapQrCode,
      bindPhone: this.bindPhone,
      intoPage: this.intoPage,
      goMenuPage: this.goMenuPage,
      getMenuData: this.getMenuData,
      goEdit: this.goEdit
    };
  },
  data() {
    return {
      statisticsList: [
        {
          name: '元宝'
        },
        {
          name: '思念值89点'
        },
        {
          name: '消息0条'
        }
      ],
      // 常用功能列表
      commonlyUsedFunctionsList: [
        {
          name: '重要日子',
          icon: 'https://sq-crms.oss-cn-beijing.aliyuncs.com/UNI_APP/shiqin_icon/festivals1.png'
        },
        {
          name: '今日运势',
          icon: 'https://sq-crms.oss-cn-beijing.aliyuncs.com/UNI_APP/shiqin_icon/star.png'
        },
        {
          name: '称谓计算器',
          icon: 'https://sq-crms.oss-cn-beijing.aliyuncs.com/UNI_APP/shiqin_icon/financialCalculators.png'
        },
        {
          name: '老黄历',
          icon: 'https://sq-crms.oss-cn-beijing.aliyuncs.com/UNI_APP/shiqin_icon/calendars1.png'
        },
        {
          name: '邀请好友',
          icon: 'https://sq-crms.oss-cn-beijing.aliyuncs.com/UNI_APP/shiqin_icon/invitations.png'
        }
      ],
      // 系统功能列表
      systemFeaturesList: [
        {
          name: '在线客服',
          icon: 'https://sq-crms.oss-cn-beijing.aliyuncs.com/UNI_APP/shiqin_icon/onlineCustomerService.png'
        },
        {
          name: '帮助反馈',
          icon: 'https://sq-crms.oss-cn-beijing.aliyuncs.com/UNI_APP/shiqin_icon/helpFeedback.png'
        },
        {
          name: '操作日志',
          icon: 'https://sq-crms.oss-cn-beijing.aliyuncs.com/UNI_APP/shiqin_icon/operationLog1.png'
        },
        {
          name: '设置',
          icon: 'https://sq-crms.oss-cn-beijing.aliyuncs.com/UNI_APP/shiqin_icon/set.png'
        },
      ],
      headerHeight: 0,
      diyData: {},
      orderAdminData: {},
      // #ifdef MP
      getHeight: this.$util.getWXStatusHeight(),
      // #endif
      vipStatus: 0,
      stu: false,
      orderMenu: [
        {
          icon: '',
          title: '待付款',
          url: '/pages/goods/order_list/index?status=0'
        },
        {
          icon: '',
          title: '待发货',
          url: '/pages/goods/order_list/index?status=1'
        },
        {
          icon: '',
          title: '待收货',
          url: '/pages/goods/order_list/index?status=2'
        },
        {
          icon: '',
          title: '待评价',
          url: '/pages/goods/order_list/index?status=3'
        },
        {
          icon: '',
          title: '售后/退款',
          url: '/pages/users/user_return_list/index'
        }
      ],
      imgUrls: [],
      orderStatusNum: {},
      userInfo: '',
      storeMenuShow: false, // 商家管理是否显示
      showStatus: 1,
      // #ifdef H5 || MP
      pageHeight: '100%',
      routineContact: 0,
      // #endif
      // #ifdef APP-PLUS
      pageHeight: app.globalData.windowHeight,
      // #endif
      // #ifdef H5
      isWeixin: Auth.isWeixin(),
      //#endif
      footerSee: false,
      member_style: 1,
      my_banner_status: 1,
      menu_status: 1,
      service_status: 1,
      newcomer_status: 1,
      codeIndex: 0,
      config: {
        bar: {
          code: '',
          color: ['#000'],
          bgColor: '#FFFFFF', // 背景色
          width: 480, // 宽度
          height: 110 // 高度
        },
        qrc: {
          code: '',
          size: 380, // 二维码大小
          level: 3, //等级 0～4
          bgColor: '#FFFFFF', //二维码背景色 默认白色
          border: {
            color: ['#eee', '#eee'], //边框颜色支持渐变色
            lineWidth: 3 //边框宽度
          },
          // img: '/static/logo.png', //图片
          // iconSize: 40, //二维码图标的大小
          color: ['#333', '#333'] //边框颜色支持渐变色
        }
      },
      isCode: false,
      isextension: false,
      extension: {
        code: '',
        size: 380, // 二维码大小
        level: 3, //等级 0～4
        bgColor: '#FFFFFF', //二维码背景色 默认白色
        border: {
          color: ['#eee', '#eee'], //边框颜色支持渐变色
          lineWidth: 3 //边框宽度
        },
        // img: '/static/logo.png', //图片
        // iconSize: 40, //二维码图标的大小
        color: ['#333', '#333'] //边框颜色支持渐变色
      },
      imgHost: HTTP_REQUEST_URL,
      copyRightText: '',
      copyRightImg: '',
      giftPic: '',
      vip_type: 1,
      newcomer_style: 1,
      newList: [],
      newBg: '',
      comerGift: {},
      isComerGift: false,
      memberStatus: 0,
      balanceStatus: 0, // 余额是否展示
      editModal: false, // 编辑头像信息
      isScrolling: false,
      orderStyle: {
        1: ['icon-ic_daifukuan12', 'icon-ic_daifahuo11', 'icon-ic_daishouhuo1', 'icon-ic_daipingjia1', 'icon-ic_daituikuan1'],
        2: ['icon-ic_daifukuan2', 'icon-ic_daifahuo2', 'icon-ic_daishouhuo2', 'icon-ic_daipingji2', 'icon-ic_daituikuan2'],
        3: ['icon-ic_daifukuan', 'icon-ic_daifahuo', 'icon-ic_daishouhuo', 'icon-ic_daipingjia', 'icon-ic_daituikuan']
      }
    };
  },
  created() {
    let that = this;
    // #ifdef MP
    // 小程序静默授权
    if (!this.$store.getters.isLogin) {
      // Routine.getCode()
      //   .then(code => {
      //     Routine.silenceAuth(code).then(res => {
      //       this.onLoadFun();
      //     })
      //   })
      //   .catch(res => {
      //     uni.hideLoading();
      //   });
    }
    // #endif
    // #ifdef APP-PLUS
    that.$set(that, 'pageHeight', app.globalData.windowHeight);
    // #endif
  },
  onReady() {
    this.$nextTick(() => {
      this.$refs.headerTitle.getPageHeight()
    })
  },

  async onLoad(option) {
    if (this.isLogin) {
      // this.getNewcomerGift();
    }
    // #ifdef H5
    if (this.isLogin && Auth.isWeixin() && option.code) {
      try {
        let res = await updateWechatInfo({
          code: option.code
        });
        this.userInfo.nickname = res.data.nickname;
        this.userInfo.avatar = res.data.avatar;
        this.userInfo.is_complete = 1;
      } catch (e) {
      }
    }
    // #endif
    this.colorData();
  },
  onShow() {
    if (!this.isLogin) {
      this.userInfo = '';
      toLogin();
      return;
    }
    if (this.cartNum > 0) {
      uni.setTabBarBadge({
        index: 2,
        text: this.cartNum > 99 ? '99+' : this.cartNum + ''
      });
    } else {
      uni.hideTabBarRedDot({
        index: 2
      });
    }
    this.copyRightText = uni.getStorageSync('copyNameInfo');
    this.copyRightImg = uni.getStorageSync('copyImageInfo');
    uni.removeStorageSync('form_type_cart');
    if (!this.copyRightText) {
      this.getCopyRight();
    }
    let that = this;
    // #ifdef APP-PLUS
    uni.getSystemInfo({
      success: function (res) {
        that.pageHeight = res.windowHeight + 'px';
      }
    });
    // #endif
    if (that.isLogin) {
      this.getUserInfo();
      this.getMyMenus();
      this.setVisit();
      this.getMenuData();
    }
  },

  // #ifdef MP || APP-PLUS
  onPageScroll(e) {
    if (e.scrollTop > 50) {
      this.isScrolling = true;
    } else if (e.scrollTop < 50) {
      this.isScrolling = false;
    }
  },
  // #endif

  methods: {
    getPageHeight(number) {
      this.headerHeight = number
    },
    // 跳转用户详情
    goToUserPath() {
      this.$nav.navigateTo('/pages/shiqinUserPage/personalData',{member_id:this.userInfo.uid})
    },
    isObjectData(obj) {
      return Object.keys(obj).length !== 0;
    },
    // #ifdef MP
    editSuccess() {
      this.editModal = false;
      this.getUserInfo();
    },
    closeEdit() {
      this.editModal = false;
    },
    // #endif
    getCopyRight() {
      copyRight()
          .then((res) => {
            let data = res.data;
            if (!data.copyrightContext && !data.copyrightImage) {
              data.copyrightImage = '/static/images/support.png';
            }
            uni.setStorageSync('copyNameInfo', data.copyrightContext);
            uni.setStorageSync('copyImageInfo', data.copyrightImage);
            this.copyRightText = data.copyrightContext;
            this.copyRightImg = data.copyrightImage;
          })
          .catch((err) => {
            return this.$util.Tips({
              title: err.msg
            });
          });
    },
    // 查看订单
    intoPage(url) {
      if (this.isLogin) {
        this.$util.JumpPath(url);
      } else {
        toLogin();
      }
    },
    // 编辑页面
    goEdit() {
      if (this.isLogin == false || !this.userInfo.uid) {
        toLogin();
      } else {
        // #ifdef MP
        if (this.userInfo.is_default_avatar) {
          this.editModal = true;
          return;
        }
        // #endif
        uni.navigateTo({
          url: '/pages/users/user_set/index'
        });
      }
    },
    goDetail(item) {
      uni.navigateTo({
        url: `/pages/goods_details/index?id=${item.id}&fromPage='newVip'`
      });
    },
    comerPop() {
      this.isComerGift = false;
    },
    getNewcomerGift() {
      if (uni.getStorageSync('newcomerGift')) {
        return (this.isComerGift = false);
      }
      newcomerGift()
          .then((res) => {
            this.comerGift = res.data;
            if (Object.prototype.toString.call(this.comerGift) == '[object Object]') {
              if (res.data.coupon_count || res.data.product_count || res.data.register_give_money || res.data.first_order_discount || res.data.register_give_integral) {
                uni.setStorageSync('newcomerGift', true);
                this.isComerGift = true;
              }
            }
          })
          .catch((err) => {
            return this.$util.Tips({
              title: err
            });
          });
    },
    tapQrCode() {
      uni.navigateTo({
        url: '/pages/users/user_member_code/index'
      });
    },
    getRoutineUserInfo(e) {
      updateUserInfo({
        userInfo: e.detail.userInfo
      })
          .then((res) => {
            this.getUserInfo();
            return this.$util.Tips('更新用户信息成功');
          })
          .catch((err) => {
            return this.$util.Tips(err);
          });
    },
    // 记录会员访问
    setVisit() {
      setVisit({
        url: '/pages/user/index'
      }).then((res) => {
      });
    },
    // 打开授权
    openAuto() {
      toLogin();
    },
    // 授权回调
    onLoadFun(e) {
      this.getUserInfo(e);
      this.getMyMenus();
      this.setVisit();
    },
    // 绑定手机
    bindPhone() {
      uni.navigateTo({
        url: '/pages/users/user_phone/index'
      });
    },
    // 获取行销数据
    getMenuData() {
      getMenuData().then((res) => {
        this.orderAdminData = res.data;
      });
    },
    /**
     * 获取个人用户信息
     */
    getUserInfo() {
      let that = this;
      getUserInfo().then((res) => {
        that.userInfo = res.data;
        that.stu = res.data.svip_open;
        that.balanceStatus = res.data.balance_func_status;
        that.memberStatus = parseInt(res.data.member_func_status);
        that.vipStatus = res.data.vip_status;
        that.$store.commit('SETUID', res.data.uid);
        that.$store.commit('UPDATE_USERINFO', res.data);
        that.orderMenu.forEach((item, index) => {
          switch (item.title) {
            case '待付款':
              this.$set(item, 'num', res.data.orderStatusNum.unpaid_count);
              break;
            case '待发货':
              this.$set(item, 'num', res.data.orderStatusNum.unshipped_count);
              break;
            case '待收货':
              this.$set(item, 'num', res.data.orderStatusNum.received_count);
              break;
            case '待评价':
              this.$set(item, 'num', res.data.orderStatusNum.evaluated_count);
              break;
            case '售后/退款':
              this.$set(item, 'num', res.data.orderStatusNum.refunding_count);
              break;
          }
        });
      });
    },
    getMyMenus: function () {
      let that = this;
      // if (this.MyMenus.length) return;
      getMenuList().then((res) => {
        res.data.routine_my_menus.forEach((el, index, arr) => {
          if (el.type == '2') {
            this.storeMenuShow = true;
          }
        });
        this.diyData = res.data.diy_data;
        this.switchTab(this.diyData.order.style);
        this.my_banner_status = res.data.diy_data.my_banner_status;
        this.menu_status = res.data.diy_data.menu_status;
        this.service_status = res.data.diy_data.service_status;
        this.vip_type = res.data.diy_data.vip_type;
        this.newcomer_style = res.data.diy_data.newcomer_style;
        this.newcomer_status = res.data.diy_data.newcomer_status;
        this.imgUrls = res.data.routine_my_banner;
        this.routineContact = Number(res.data.routine_contact_type);
      });
    },
    switchTab(style) {
      this.orderMenu.forEach((item, index) => {
        item.icon = this.orderStyle[style][index];
      });
    },
    goMenuPage(url, name) {
      console.log(url);
      if (this.isLogin) {
        let arr = url.split('@APPID=');
        if (arr.length > 1) {
          //#ifdef MP
          uni.navigateToMiniProgram({
            appId: arr[arr.length - 1], // 此为生活缴费appid
            path: arr[0], // 此为生活缴费首页路径
            envVersion: 'release',
            success: (res) => {
              console.log('打开成功', res);
            },
            fail: (err) => {
              console.log('sgdhgf', err);
            }
          });
          //#endif
          //#ifndef MP
          this.Tips({
            title: 'h5与app端不支持跳转外部小程序'
          });
          //#endif
        } else {
          if (url == '/pages/extension/customer_list/chat' || url == 'https://chat.crmeb.net/chat/mobile') {
            this.$util.getCustomer(this.userInfo);
          } else {
            if (url.indexOf('http') === -1) {
              // #ifdef H5
              if (name && name === '订单核销') {
                return (window.location.href = `${location.origin}${url}`);
              }
              // #endif
              // #ifdef MP
              if (url != '#' && url == '/pages/users/user_set/index') {
                uni.openSetting({
                  success: function (res) {
                  }
                });
              }
              // #endif
              if (url == '/pages/store_spread/index') {
                storeCardApi()
                    .then((res) => {
                      this.isextension = true;
                      this.$nextTick(function () {
                        this.extension.code = res.data.url;
                      });
                    })
                    .catch((err) => {
                      uni.hideLoading();
                      this.$util.Tips({
                        title: err
                      });
                    });
              }
              if (
                  ['/pages/goods_cate/goods_cate', '/pages/order_addcart/order_addcart', '/pages/user/index', '/pages/store_cate/store_cate', '/pages/index/index'].indexOf(url) == -1
              ) {
                uni.navigateTo({
                  url: url
                });
              } else {
                uni.reLaunch({
                  url: url
                });
              }
            } else {
              // #ifdef H5
              this.$util.JumpPath(url);
              // #endif
              // #ifndef H5
              uni.navigateTo({
                url: `/pages/annex/web_view/index?url=${url}`
              });
              // #endif
            }
          }
        }
      }
    },
    getTimePeriod() {
      const currentTime = new Date();
      const currentHour = currentTime.getHours();

      if (currentHour >= 6 && currentHour < 12) {
        return '，早上好！';
      } else if (currentHour >= 12 && currentHour < 14) {
        return '，中午好！';
      } else if (currentHour >= 14 && currentHour < 18) {
        return '，下午好！';
      } else {
        return '，晚上好！';
      }
    },
  },
}
</script>

<style lang="scss">
.user_shiqin {
  width: 750rpx;
  min-height: 100vh;
  position: relative;

  .bag {
    width: 750rpx;
    position: absolute;
    top: 0;
    left: 0;

    .bag_image {
      width: 750rpx;
    }
  }

  .user_shiqin_headerAvater {
    width: 702rpx;

    .user_shiqin_headerAvater_left {
      .user_shiqin_headerAvater_left_info {
        .user_shiqin_headerAvater_left_info_top {
          .user_shiqin_headerAvater_left_info_top_name {
            .user_shiqin_headerAvater_left_info_top_name_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 38rpx;
              color: #2C2C2C;
            }

          }

          .user_shiqin_headerAvater_left_info_top_image {
            width: 140rpx;
            height: 42rpx;
          }

          .user_shiqin_headerAvater_left_info_top_grade {
            .user_shiqin_headerAvater_left_info_top_grade_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 28rpx;
              color: #2C2C2C;
            }
          }
        }

        .user_shiqin_headerAvater_left_info_bottom {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #2C2C2C;
        }

        .user_shiqin_headerAvater_left_info_describe {
          .user_shiqin_headerAvater_left_info_describe_level {
            //width: 52rpx;
            padding: 0 10rpx;
            height: 28rpx;
            background: #FF4206;
            border-radius: 6rpx 6rpx 6rpx 6rpx;

            .user_shiqin_headerAvater_left_info_describe_level_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 20rpx;
              color: #FFFFFF;
            }
          }

          .user_shiqin_headerAvater_left_info_describe_number {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #2C2C2C;
          }
        }
      }
    }

    .user_shiqin_headerAvater_right {

      .user_shiqin_headerAvater_right_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #808080;
      }
    }
  }

  .user_shiqin_statistics {
    width: 702rpx;
    height: 163rpx;
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    .user_shiqin_statistics_list {
      .user_shiqin_statistics_list_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #292929;
      }
    }
  }

  .user_shiqin_member {
    width: 702rpx;
    height: 113rpx;
    background: linear-gradient(130deg, #1B130F 0%, #402E21 100%);
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    .user_shiqin_member_left {
      .user_shiqin_member_left_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 20rpx;
        color: #FFD7AA;
      }
    }

    .user_shiqin_member_right {
      width: 156rpx;
      height: 53rpx;
      background: #EBC28E;
      border-radius: 27rpx 27rpx 27rpx 27rpx;

      .user_shiqin_member_right_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #30241C;
      }
    }
  }

  .user_shiqin_marketplaceOperations {
    width: 702rpx;

    .user_shiqin_marketplaceOperations_left {
      width: 227rpx;
      height: 143rpx;
      background: #FEF0EB;
      border: 1rpx solid #FFE0D6;
      //background: linear-gradient(134deg, #C27BFF 0%, #FF2222 100%);
      border-radius: 20rpx 20rpx 20rpx 20rpx;

      .user_shiqin_marketplaceOperations_left_info {
        .user_shiqin_marketplaceOperations_left_info_title {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #FFBF38;
        }

        .user_shiqin_marketplaceOperations_left_info_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 300;
          font-size: 16rpx;
          color: #9F9F9F;
        }
      }
    }

    .user_shiqin_marketplaceOperations_right {
      .user_shiqin_marketplaceOperations_right_top {
        width: 340rpx;
        height: 121rpx;
        background: linear-gradient(131deg, #21FFDE 0%, #21AAFF 100%);
        border-radius: 20rpx 20rpx 20rpx 20rpx;

        .user_shiqin_marketplaceOperations_right_top_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #FFFFFF;
        }
      }

      .user_shiqin_marketplaceOperations_right_bottom {
        width: 340rpx;
        height: 121rpx;
        background: linear-gradient(132deg, #F4ABFD 0%, #FF2CAB 100%);
        border-radius: 20rpx 20rpx 20rpx 20rpx;

        .user_shiqin_marketplaceOperations_right_bottom_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #FFFFFF;
        }
      }
    }
  }

  .user_shiqin_commonlyUsedFunctionsListAll {
    width: 702rpx;
    height: 219rpx;
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    overflow: hidden;

    .user_shiqin_commonlyUsedFunctions {
      width: 662rpx;
      padding: 36rpx 0 18rpx 0;

      .user_shiqin_commonlyUsedFunctions_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #2C2C2C;
      }
    }
  }

  .user_shiqin_commonlyUsedFunctionsList {
    width: 702rpx;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-content: space-between;

    .user_shiqin_commonlyUsedFunctionsList_list {
      .user_shiqin_commonlyUsedFunctionsList_list_image {
        width: 87rpx;
        height: 87rpx;
      }

      .user_shiqin_commonlyUsedFunctionsList_list_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #4B4B4B;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.footer-placeholder {
  height: calc(98rpx + constant(safe-area-inset-bottom));
  height: calc(98rpx + env(safe-area-inset-bottom));
  height: 98rpx;
}

.user-page {
  padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
  padding-bottom: 100rpx;
}

.copy_right {
  text-align: center;
  color: #ccc;
  font-size: 22rpx;
  margin-top: 40rpx;

  .copyRightImg {
    width: 219rpx;
    height: 74rpx;
    margin: 16rpx auto;
    display: block;
  }

  .support {
    width: 219rpx;
    height: 74rpx;
    margin: 54rpx auto;
    display: block;
  }

  .copyRightText {
    margin-top: 0rpx;
    color: #ccc;
    font-size: 20rpx;
    margin-bottom: 20rpx;
  }
}

.svip_card {
  width: 662rpx;
  height: 92rpx;
  background-image: url('@/static/img/user_svip_bg.png');
  background-size: 100%;
  background-repeat: no-repeat;
}

.bag {
  width: 750rpx;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: url("https://sq-crms.oss-cn-beijing.aliyuncs.com/UNI_APP/banner_background.png") no-repeat;
  background-size: 750rpx 100vh;
}

.family_scrollView {
  width: 750rpx;
}
</style>